<template>
  <header class="header">
    <div class="title-section">
      <el-tag size="large" type="info" effect="plain" class="type-tag">
        {{ menuInfo.title ? '编辑菜单' : '新建菜单' }}
      </el-tag>
      <h2 class="menu-title">
        {{ menuInfo.title || '未命名菜单' }}
      </h2>
    </div>
    <el-button type="primary" icon="Check" @click="saveMenu">保存菜单</el-button>
  </header>
  <el-scrollbar class="form-container">
    <el-form label-width="120px" :model="menuInfo" :rules="rules" ref="formRef" class="menu-form">
      <el-card class="form-section">
        <template #header>
          <div class="card-header">
            <el-icon><Document /></el-icon>
            <span>基本信息</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="title">
              <el-input clearable v-model="menuInfo.title" placeholder="请输入菜单名称">
                <template #prefix>
                  <el-icon><Edit /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单标识" prop="name">
              <el-input clearable v-model="menuInfo.name" placeholder="请输入菜单标识">
                <template #prefix>
                  <el-icon><Key /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="上级菜单" prop="parentId">
              <el-select v-model="menuInfo.parentId" placeholder="请选择上级菜单" class="w-full">
                <el-option label="无上级菜单" :value="0">
                  <el-icon><HomeFilled /></el-icon>
                  <span class="ml-2">根菜单</span>
                </el-option>
                <el-option v-for="item in systemStore.menuList" :key="item.path" :label="item.meta.title" :value="item.meta.menuId">
                  <el-icon><FolderOpened /></el-icon>
                  <span class="ml-2">{{ item.meta.title }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单类型" prop="menuType">
              <el-radio-group v-model="menuInfo.menuType" class="custom-radio-group">
                <el-radio-button :value="MenuType.MENU">
                  <div class="custom-radio-button">
                    <el-icon><Menu /></el-icon>
                    菜单
                  </div>
                </el-radio-button>
                <el-radio-button :value="MenuType.CATALOG">
                  <div class="custom-radio-button">
                    <el-icon><Folder /></el-icon>
                    目录
                  </div>
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-section">
        <template #header>
          <div class="card-header">
            <el-icon><Setting /></el-icon>
            <span>配置信息</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="菜单图标" prop="icon">
              <el-input :prefix-icon="menuInfo.icon" v-model="menuInfo.icon" placeholder="点击选择图标" readonly>
                <template #append>
                  <el-button style="color: #fff" type="primary" @click="showIconDialog">
                    <el-icon><Search /></el-icon>
                    选择图标
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="菜单路由" prop="path">
              <el-input v-model="menuInfo.path" placeholder="请输入菜单路由">
                <template #prefix>
                  <el-icon><Link /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路由重定向">
              <el-input v-model="menuInfo.redirect" placeholder="请输入路由重定向">
                <template #prefix>
                  <el-icon><Connection /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="视图地址" prop="component">
              <el-input v-model="menuInfo.component" placeholder="请输入视图地址">
                <template #prepend>@/views</template>
                <template #append>.vue</template>
                <template #prefix>
                  <el-icon><Files /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单排序">
              <el-input-number v-model="menuInfo.orderNo" :min="0" :max="999" controls-position="right" class="w-full" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-section">
        <template #header>
          <div class="card-header">
            <el-icon><Switch /></el-icon>
            <span>高级选项</span>
          </div>
        </template>
        <el-row :gutter="20" class="switch-group">
          <el-col :span="8">
            <el-form-item label="菜单隐藏">
              <el-switch v-model="menuInfo.hidden" active-text="隐藏" inactive-text="显示" inline-prompt />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="固定菜单">
              <el-switch v-model="menuInfo.isAffix" active-text="固定" inactive-text="不固定" inline-prompt />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快捷访问">
              <el-switch v-model="menuInfo.isShortcut" active-text="是" inactive-text="否" inline-prompt />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="需要授权">
              <el-switch v-model="menuInfo.isAuth" active-text="需要授权" inactive-text="无需授权" inline-prompt />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注信息">
              <el-input type="textarea" :rows="4" v-model="menuInfo.remark" placeholder="请输入菜单相关的备注信息" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
  </el-scrollbar>

  <el-dialog v-model="iconSelectVisiable" title="选择图标" width="850px" destroy-on-close>
    <div class="icon-dialog-content">
      <el-input v-model="searchText" placeholder="搜索图标" class="mb-4">
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-scrollbar height="400px">
        <div class="icon-grid">
          <el-button v-for="item in filteredIcons" :key="item.name" @click="onSelectIcon(item.name)" class="icon-item">
            <el-icon><component :is="item.name" /></el-icon>
            <span class="icon-name">{{ item.name }}</span>
          </el-button>
        </div>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>

<script name="MenuInfo" setup>
  import * as ElIcons from '@element-plus/icons-vue';
  import { useMenuApi } from '@/api/menu-api.js';
  import { MenuType, RStatus } from '@/common/comstants';
  import router from '@/router';
  import { useMenuStore } from '@/store/menu-store.js';

  const _props = defineProps({
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  });
  const icons = Object.values(ElIcons).map((icon) => ({
    name: icon.name,
  }));
  const filteredIcons = computed(() => {
    return icons.filter((icon) => icon.name.toLowerCase().includes(searchText.value.toLowerCase()));
  });
  const menuInfo = computed(() => _props.menuInfo);
  const systemStore = useMenuStore();
  const rules = ref({
    title: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
    name: [{ required: true, message: '菜单标识不能为空', trigger: 'blur' }],
    parentId: [{ required: true, message: '上级菜单不能为空', trigger: 'blur' }],
    menuType: [{ required: true, message: '菜单类型不能为空', trigger: 'blur' }],
    path: [{ required: true, message: '菜单路由不能为空', trigger: 'blur' }],
    component: [{ required: true, message: '视图地址不能为空', trigger: 'blur' }],
  });
  const formRef = ref(null);
  const _emit = defineEmits(['refresh']);

  let iconSelectVisiable = ref(false);
  let searchText = ref('');

  watch(
    menuInfo,
    (newVal) => {
      if (newVal.menuType === MenuType.CATALOG) {
        rules.value.component = [];
      } else {
        rules.value.component.push({ required: true, message: '视图地址不能为空', trigger: 'blur' });
      }
      formRef.value.clearValidate();
    },
    { deep: true }
  );

  /**
   * 显示图标选择框
   */
  const showIconDialog = () => {
    iconSelectVisiable.value = true;
  };

  /**
   * 选择图标
   * @param name 图标名称
   */
  const onSelectIcon = (name) => {
    menuInfo.value.icon = name;
    iconSelectVisiable.value = false;
  };

  /**
   * 保存菜单
   */
  const saveMenu = () => {
    formRef.value.validate((valid) => {
      if (!valid) {
        return false;
      } else {
        const loading = ElLoading.service({
          lock: true,
          text: 'Loading',
          background: 'rgba(0, 0, 0, 0.7)',
        });

        useMenuApi()
          .save(menuInfo.value)
          .then(async (res) => {
            if (res.status === RStatus.SUCCESS) {
              await systemStore.fetchRoutes(router);
              _emit('refresh');
              ElMessage.success(res.data);
              loading.close();
            }
          });
      }
    });
  };
</script>

<style lang="scss" scoped>
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 24px;

    .title-section {
      display: flex;
      align-items: center;
      gap: 12px;

      .type-tag {
        background-color: rgba(74, 144, 226, 0.1);
        color: #4a90e2;
        border: none;
        font-weight: 500;
        padding: 6px 12px;
      }

      .menu-title {
        color: #1e293b;
        font-weight: 600;
        margin: 0;
        font-size: 1.5rem;
      }
    }
  }

  .el-button {
    transition: all 0.3s ease;
    padding: 12px 24px;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
    }
  }

  .form-container {
    height: calc(100vh - 280px);
    padding: 0 24px;

    .form-section {
      margin-bottom: 24px;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
      }

      .card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #4a90e2;
        font-weight: 600;
        padding: 16px 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      }

      .el-form-item {
        margin-bottom: 24px;

        &__label {
          font-weight: 500;
          color: #475569;
        }
      }

      .el-input__wrapper {
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;

        &:hover {
          border-color: #4a90e2;
          box-shadow: 0 0 0 1px rgba(74, 144, 226, 0.2);
        }

        &.is-focus {
          border-color: #4a90e2;
          box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    .header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      padding: 16px;

      .el-button {
        width: 100%;
      }
    }

    .form-container {
      padding: 0 16px;

      .el-form-item {
        margin-bottom: 16px;
      }
    }
  }

  .icon-dialog-content {
    padding: 16px;
  }

  .icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    padding: 16px;

    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      height: 80px;
      padding: 12px;
      border: 1px solid var(--el-border-color);
      border-radius: 4px;
      transition: all 0.3s;

      &:hover {
        border-color: var(--el-color-primary);
        color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-9);
      }

      .el-icon {
        font-size: 24px;
      }

      .icon-name {
        font-size: 12px;
        color: var(--el-text-color-secondary);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        max-width: 100%;
      }
    }
  }

  // 全局样式
  :deep(.el-input-number.w-full) {
    width: 100%;
  }

  .w-full {
    width: 100%;
  }

  .mb-4 {
    margin-bottom: 16px;
  }

  .ml-2 {
    margin-left: 8px;
  }
</style>
@/store/menu@/store/menu.js@/store/menu-store.js@/api/menu-api@/store/menu-store.js